<template>
  <div class="chat-container">
    <van-nav-bar
      title="小智同学"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <!-- 对话主体区域 -->
    <div class="dialogue-list">
      <div v-for="(item, index) in list" :key="index">
        <!-- 小智 -->
        <template v-if="item.type === 'xz'">
          <div class="chat-item left">
            <van-image
              round
              width="40"
              height="40"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="chat-info">{{ item.msg }}</div>
          </div>
        </template>
        <template v-if="item.type === 'user'">
          <!-- 用户 -->
          <div class="chat-item right">
            <div class="chat-info">{{ item.msg }}</div>
            <van-image
              round
              width="40"
              height="40"
              :src="$store.state.userInfo.photo"
            />
          </div>
        </template>
      </div>
    </div>
    <!-- 输入 -->
    <van-field v-model="keyword" placeholder="说点什么...">
      <template #button>
        <van-button size="mini" @click="send()">发送</van-button>
      </template>
    </van-field>
  </div>
</template>

<script>
import { io } from 'socket.io-client'
export default {
  name: 'Chat',
  data () {
    return {
      keyword: '',
      list: [] // 接收服务器返回的消息
    }
  },
  methods: {
    // 把数据发送给服务器
    send () {
      this.socket.emit('chat message', this.keyword)
      // 把用户发送的内容放到数组里，添加type属性是为了区分是谁的数据
      this.list.push({
        type: 'user',
        msg: this.keyword
      })
      // 点击之后清空输入框
      this.keyword = ''
    }
  },
  created () {
    // 1.创建连接
    this.socket = io('ws://localhost:5522') // 协议为ws
    // 2.监听是否连接成功
    this.socket.on('connect', () => {
      console.log('建立连接成功了')
    })
    // 3.接收服务器返回的数据  chat message 和后端约定好的
    this.socket.on('chat message', msg => {
      console.log('服务回来的消息', msg)
      // 把服务器返回的内容放到数组里,添加type属性是为了区分是谁的数据
      this.list.push({
        type: 'xz',
        msg: msg
      })
    })
  }
}
</script>

<style lang="less" scoped>
.chat-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  padding: 46px 0 50px 0;
  box-sizing: border-box;
}
// 对话主体区域
.dialogue-list {
  height: 100%;
  overflow-y: scroll;
  .chat-item {
    padding: 10px;
    .chat-info {
      display: inline-block;
      vertical-align: top;  // 对齐方式
      min-width: 40px;
      max-width: 70%;
      min-height: 40px;
      line-height: 38px;
      padding: 0 10px;
      background-color: #e0effb;
      border: 0.5px solid #c2d9ea;
      border-radius: 5px;
      position: relative;
      word-break: break-all; // 文字自动换行
      font-size: 14px;
      color: #333;
      &::before {
        content: "";
        position: absolute;
        top: 12px;
        width: 10px;
        height: 10px;
        background: #e0effb;
        border-top:0.5px solid #c2d9ea;
        border-right:0.5px solid #c2d9ea;
      }
    }
  }
  // 左
  .chat-item.left {
    text-align: left;
    .chat-info {
      margin-left: 15px;
      margin-right: 0;
      &::before {
        left: -5px;
        transform: rotate(-135deg);
      }
    }
  }
  // 右
  .chat-item.right {
    text-align: right;
    .chat-info {
      margin-right: 15px;
      margin-left: 0;
      &::before {
        right: -5px;
        transform: rotate(45deg);
      }
    }
  }

}
.van-field__button {
  .van-button {
    border: none;
    color: #666;
  }
}
</style>
